<template>
  <div class="user-info-container">
    <el-card class="print-box">
      <el-button
        type="primary"
        :loading="printLoading"
        v-print="printObj"
      >{{ $t('userInfo.print') }}</el-button>
    </el-card>
    <el-card>
      <div
        class="user-info-box"
        id="userInfoBox"
      >
        <!-- 标题 -->
        <h2>{{$t('userInfo.title')}}</h2>
        <!-- 头部 -->
        <div class="header">
          <el-descriptions
            :column="2"
            border
          >
            <el-descriptions-item :label="$t('userInfo.name')">
              {{userDetail.username}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('userInfo.sex')">
              {{userDetail.gender}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('userInfo.nation')">
              {{userDetail.nationality}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('userInfo.mobile')">
              {{userDetail.mobile}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('userInfo.province')">
              {{userDetail.province}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('userInfo.date')">
              {{$filters.formatDate(userDetail.openTime)}}
            </el-descriptions-item>
            <el-descriptions-item
              :span="2"
              :label="$t('userInfo.remark')"
            >
              <el-tag
                class="remark"
                size="small"
                v-for="i,k in userDetail.remark"
                :key="k"
              >
                {{i}}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('userInfo.address')">
              {{userDetail.address}}
            </el-descriptions-item>
          </el-descriptions>
          <!-- 头像 -->
          <el-image
            class="avatar"
            :src="userDetail.avatar"
            :preview-src-list="[userDetail.avatar]"
          ></el-image>
        </div>
        <!-- 内容 -->
        <div class="body">
          <el-descriptions
            direction="vertical "
            :column="1"
            border
          >
            <el-descriptions-item :label="$t('userInfo.experience')">
              <ul>
                <li
                  v-for="(item, index) in userDetail.experience"
                  :key="index"
                >
                  <span>
                    {{ $filters.formatDate(item.startTime, 'YYYY/MM') }}
                    ----
                    {{ $filters.formatDate(item.endTime, 'YYYY/MM') }}</span>
                  <span>{{ item.title }}</span>
                  <span>{{ item.desc }}</span>
                </li>
              </ul>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- 尾部 -->
        <div class="foot">{{ $t('userInfo.foot') }}</div>
      </div>
    </el-card>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getUserDetail } from '@/api/user-manager'
import { watchSwitchLang } from '@/utils/i18n'

// eslint-disable-next-line no-undef
const props = defineProps({
  id: {
    type: String,
    required: true
  }
})
const printLoading = ref(false)
const printObj = {
  // 打印区域
  id: 'userInfoBox',
  // 打印标题
  popTitle: 'imooc-vue-element-admin',
  // 打印前
  beforeOpenCallback(vue) {
    printLoading.value = true
  },
  // 执行打印
  openCallback(vue) {
    printLoading.value = false
  }
}
const userDetail = ref({})
const getUserInfo = async () => {
  userDetail.value = await getUserDetail(props.id)
}
getUserInfo()
watchSwitchLang(getUserInfo)

</script>

<style lang="scss" scoped>
.print-box {
  margin-bottom: 20px;
  text-align: right;
}
.user-info-box {
  width: 1024px;
  margin: 0 auto;
  .title {
    text-align: center;
    margin-bottom: 18px;
  }
  .header {
    display: flex;
    :deep(.el-descriptions) {
      flex-grow: 1;
    }
    .avatar {
      width: 187px;
      box-sizing: border-box;
      padding: 30px 20px;
      border: 1px solid #ebeef5;
      border-left: none;
    }
    .remark {
      margin-right: 12px;
    }
  }
  .body {
    ul {
      list-style: none;
      li {
        span {
          margin-right: 62px;
        }
      }
    }
  }
  .foot {
    margin-top: 42px;
    text-align: right;
  }
}
</style>
